<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link th:href="@{/ifavicon.ico}" rel="shortcut icon"/>
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
    <title>订单详情</title>
</head>
<body>
<div class="jumbotron">
    <h1 class="display-4">订单详情</h1>
    <p class="lead">当前订单支付时间不超过10秒钟。支付倒计时<span id="minute-container"></span>分<span id="second-container"></span>秒</p>
    <hr class="my-4">
    <p>订单号：[[${orderGoodsVo.order.id}]]</p>
    <p>商品ID：[[${orderGoodsVo.goods.id}]]</p>
    <p>商品名称：[[${orderGoodsVo.goods.name}]]</p>
    <p>商品价格：[[${orderGoodsVo.goods.price}]]</p>
    <p>订单创建时间：[[${#dates.format(orderGoodsVo.order.startTime,'yyyy-MM-dd HH:mm:ss')}]]</p>
    <a class="btn btn-primary btn-lg" href="javascript: void(0);" role="button" onclick="submitOrder()">立即支付</a>
<!--    <a class="btn btn-primary btn-lg" href="javascript: void(0);" role="button" onclick="cancelOrder()">取消支付</a>-->
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/jquery.cookie-1.4.0.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/js/goods_js.js}"></script>
<script th:inline="javascript">let ctx = [[@{/}]];</script>
<script th:inline="javascript">
    let orderGoodsVo = [[${orderGoodsVo}]];
    let orderId = orderGoodsVo.order.id;

    let num = 10000;

    $(function(){
        setInterval(function(){
            if (num > 0) {
                let minute = Math.floor(num/(60*1000));
                let seconds = (num % (60*1000)) / 1000;
                num = num - 1000;
                $('#minute-container').html(minute);
                $('#second-container').html(seconds);
            } else {
                // 超时取消订单
                cancelOrder();
            }
        },1000);
    });
    
    function submitOrder() {
        let param = {};
        param['orderId'] = orderId;
        goods_js.sendLog("pay", param);

        $.ajax({
            url: ctx + 'rabbitmq/order/submitOrder',
            type: 'POST',
            dataType: 'JSON',
            data: {
                "orderId": orderId
            },
            success: function (data) {
                if (data && 200 === data.code) {
                    window.location.href = ctx + 'rabbitmq/order/list';
                } else {
                    console.log('支付失败');
                }
            },
            error: function (data) {
                console.log('提交错误');
            }
        });
    }
    
    function cancelOrder() {
        window.location.href = ctx + 'rabbitmq/order/list';
        // $.ajax({
        //     url: ctx + 'rabbitmq/order/cancelOrder',
        //     type: 'POST',
        //     dataType: 'JSON',
        //     data: {
        //         "orderId": orderId
        //     },
        //     success: function (data) {
        //         if (data && 200 === data.code) {
        //             window.location.href = ctx + 'rabbitmq/goods/list';
        //         } else {
        //             console.log('取消失败');
        //         }
        //     },
        //     error: function (data) {
        //         console.log('提交错误');
        //     }
        // });
    }

</script>
</body>
</html>